<template>
  <div class="CommentPost">
    <a-list
      class="list-demo-action-layout"
      :bordered="false"
      :data="props.dataSource"
      :pagination-props="paginationProps"
    >
      <template #item="{ item }">
        <a-list-item class="list-demo-item" action-layout="vertical">
          <template #actions>
            <span class="action"><icon-heart />{{ item.favourNum }}</span>
            <span class="action" @click="showMessage(item)"
              ><icon-message />Reply</span
            >
            <span class="action"><icon-star></icon-star></span>
          </template>
          <template #extra v-if="props.isDelete">
            <div style="width: 10vw">
              <a-space :direction="'horizontal'" fill>
                <div @click.stop>
                  <a-col :span="12" @click="deletePost(item.id)"
                    ><icon-delete class="operatorIcon"
                  /></a-col>
                </div>
              </a-space>
            </div>
          </template>
          <a-list-item-meta :title="item.userName">
            <template #avatar>
              <a-avatar shape="square" :size="80">
                <img alt="avatar" :src="item.userAvatar" />
              </a-avatar>
            </template>
            <template #description>
              <h4>{{ item.title }}</h4>
              <MdView :value="item.content" />
            </template>
          </a-list-item-meta>
        </a-list-item>
        <!--      评论    -->
        <div v-if="item.isShowMoment">
          <div class="reply">
            <a-comment
              align="right"
              :avatar="store.state.user.loginUser.userAvatar"
            >
              <template #actions>
                <a-button key="1" type="primary" @click="addComment(item.id)">
                  Reply
                </a-button>
              </template>
              <template #content>
                <a-input placeholder="请输入你的评论" v-model="form.content" />
              </template>
            </a-comment>
          </div>
          <div class="comment" v-for="comment in comments" :key="comment.id">
            <a-comment
              :author="comment.userName"
              :content="comment.content"
              :datetime="comment.createTime"
            >
              <template #avatar>
                <a-avatar>
                  <img alt="avatar" :src="comment.userAvatar" />
                </a-avatar>
              </template>
            </a-comment>
          </div>
        </div>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, withDefaults, defineProps, Prop } from "vue";
import {
  CommentControllerService,
  CommentQueryRequest,
  Post,
  PostControllerService,
  PostQueryRequest,
  PostVO,
  UserControllerService,
  UserVO,
} from "../../generated";
import { Message } from "@arco-design/web-vue";
import moment from "moment";
import { useStore } from "vuex";
import MdView from "@/components/MdView.vue";
const names = ["Socrates", "Balzac", "Plato"];
const avatarSrc = [
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp",
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp",
];
const imageSrc = [
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp",
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/04d7bc31dd67dcdf380bc3f6aa07599f.png~tplv-uwbnlip3yd-webp.webp",
  "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp",
];

const store = useStore();

interface Props {
  dataSource: Post[];
  isDelete: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  dataSource: () => {
    return [{ id: 1, userAvator: "ddddd", userName: "gx" } as Post];
  },
});

const searchParams = ref({
  current: 1,
  pageSize: 10,
});

const comments = ref([]);

const showMessage = async (post: any) => {
  post.isShowMoment = !post.isShowMoment;
  if (post.isShowMoment) {
    form.value.content = "";

    const res = await CommentControllerService.listMyCommentVoByPageUsingPost({
      ...searchParams,
      postId: post.id,
    } as CommentQueryRequest);

    if (res.code === 0) {
      Message.success("获取评论成功");
      // 获取用户信息
      for (const item of res.data.records) {
        const response = await UserControllerService.getUserByIdUsingGet(
          item.userId
        );
        const user = response.data as UserVO;
        console.log("用户", user);
        item.userName = user.userName;
        item.userAvatar = user.userAvatar;
        item.createTime = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
      }
      // 更新评论区内容
      comments.value = res.data.records;
      console.log(comments.value);
    }
  }
};

const form = ref({
  content: "",
});

const addComment = async (postId: number) => {
  const res = await CommentControllerService.addCommentUsingPost({
    postId: postId,
    content: form.value.content,
  });
  if (res.code === 0) {
    Message.success("评论成功");
    comments.value.unshift({
      content: form.value.content,
      postId: postId,
      userName: store.state.user.loginUser.userName,
      userAvatar: store.state.user.loginUser.userAvatar,
      createTime: "刚刚",
    });
  } else {
    Message.error("失败" + res.message);
  }
};

const deletePost = async (postId: number) => {
  const res = await PostControllerService.deletePostUsingPost({
    id: postId,
  });
  if (res.code === 0) {
    Message.success("删除成功");
  } else {
    Message.error("删除失败" + res.message);
  }
};
</script>

<style>
.list-demo-action-layout .image-area {
  width: 183px;
  height: 119px;
  border-radius: 2px;
  overflow: hidden;
}

.list-demo-action-layout .list-demo-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-fill-3);
}

.list-demo-action-layout .image-area img {
  width: 100%;
}

.CommentPost {
  width: 80%;
  margin: 0 auto;
}
.reply {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dededf;
  border-top: 1px solid #dededf;
  line-height: 5em;
}
.comment {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dededf;
  border-top: 1px solid #dededf;
  line-height: 5em;
}
.action:hover {
  color: deepskyblue;
}
</style>
